<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>新增盘点单-WMS库存管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <h2 class="sp-title"><span>盘点单</span></h2>
        <form action="/stocktaking/add" method="post" id="sp-form">
            <div class="sp-tool">
			<span class="fl">
                <b>仓库：
                    <select name="stockLocationId" id="stockLocationId">
                        <option th:each="item:${houses}" th:value="${item.id}" th:text="${item.name}">1111111</option>
                    </select>
                </b>
                <b>单据日期：<input type="text" name="billDate" th:value="${time}" class="date ui-input ui-datepicker-input" autocomplete="off"
                               id="form_date"></b>
                <b>单据编号：[[${billNo}]]
                <input type="hidden" name="billNo" th:value="${billNo}"/>
                </b>
            </span>
                <span class="fr"><i class="save" id="save">保存单据</i>
                    <!--                    <i class="add" id="add">新增</i>-->
                </span>
            </div>
            <div class="sp-table">
                <table>
                    <thead>
                    <tr>
                        <th>SKU</th>
                        <th>规格</th>
                        <th>仓位</th>
                        <th>当前库存</th>
                        <th>盘点库存</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="sp-data">
                    <tr th:each="item:${list}">
                        <td>
                            <input type="hidden" name="specNumber" class="specNumber">
                            <input type="hidden" name="specId" class="specId">
                            <input type="hidden" name="goodsId" class="goodsId">
                            <input type="hidden" name="goodsNumber" class="goodsNumber">
                            <input type="hidden" name="locationId" class="locationId">
                            <input type="text" class="goods" placeholder="请输入商品编码" autocomplete="off" />
                        </td>
                        <td><input type="text" readonly class="specName" placeholder="商品规格"/></td>
                        <td><input type="text" readonly class="locationName" placeholder="仓位"/></td>
                        <td><input type="text" name="quantity" class="quantity" placeholder="当前库存" readonly /></td>
                        <td><input type="text" name="countedQty" placeholder="盘点库存" /></td>
                        <td>
                            <i class="delete">-</i><i class="add">+</i>

                        </td>
                    </tr>

<!--                    <td>
                        <input type="hidden" name="specNumber" class="specNumber" th:value="${item.getSpecNumber()}">
                        <input type="hidden" name="specId" class="specId" th:value="${item.getId()}">
                        <input type="hidden" name="goodsId" class="goodsId" th:value="${item.getProductId()}" >
                        <input type="hidden" name="goodsNumber" class="goodsNumber">
                        <input type="hidden" name="locationId" class="locationId" th:value="${item.getOutLocationId()}">
                        <input type="text" class="goods" placeholder="请输入商品编码" autocomplete="off"  th:value="${item.getSpecNumber()}"/>
                    </td>
                    <td><input type="text" readonly class="specName" placeholder="商品规格" th:value="${item.getColorValue()+item.getSizeValue()}"/></td>
                    <td><input type="text" readonly class="locationName" placeholder="仓位" th:value="${item.getLocationName()}"/></td>
                    <td><input type="text" name="quantity" class="quantity" placeholder="当前库存" readonly th:value="${item.getCurrentQty()}" /></td>
                    <td><input type="text" name="countedQty" placeholder="盘点库存" autocomplete="off" th:value="${item.getCurrentQty()}" /></td>
          -->

                    </tbody>
                </table>
            </div>

        </form>
    </div>

    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/

        var housesData = /*[[${housesJSON}]]*/ null;
        /*]]>*/
    </script>

    <script type="text/javascript">


        $(function () {
            // console.log(JSON.stringify(housesData));

            function render(data) {

                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    var goodsName =  data[i].specNumber + '['+data[i].colorValue+data[i].sizeValue + '][仓位：'+data[i].locationName+'，库存：'+data[i].currentQty+']'
                    tpl += '<li '  +
                        'locationName="'+data[i].locationName+'" ' +
                        'locationId="'+data[i].locationId+'" ' +
                        'goodsNumber="'+data[i].goodsNumber+'" ' +
                        'goodsId="'+ data[i].goodsId +'" ' +
                        ' spec-no="' + data[i].specNumber + '"' +
                        ' spec-name="' + data[i].colorValue+ " " + data[i].sizeValue + '"' +
                        ' spec-id="' + data[i].goodsSpecId + '" '+
                        ' data-quantity="' + data[i].currentQty + '" >' + goodsName + '</li>';
                }
                $('.sp-result').html(tpl);
            }

            function init() {
                var $box = $('<ul class="sp-result"></ul>').appendTo($('body'));
                var $status = false;
                var $specId = null; //商品规格id
                var $specNumber = null; //商品规格编号
                var $specName = null; //商品规格
                var $goodsId = null; //商品id
                var $goodsNumber = null; //商品编码
                var $quantity = null; //数量
                var $locationName = null;
                var $locationId = null;
                var $goodsName =null;//显示的名称
                $(document).click(function (e) {
                    if ($status) {
                        $box.hide();
                        $status = false;
                    }
                });
                $('#sp-data').delegate('.goods', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _tr = _this.parent('td').parent('tr');
                    $goodsName = _this;
                    $specNumber = _tr.find('.specNumber'); //商品规格编码
                    $specId = _tr.find('.specId'); //商品id
                    $specName = _tr.find('.specName'); //规格
                    $goodsId = _tr.find('.goodsId'); //
                    $goodsNumber = _tr.find('.goodsNumber'); //
                    $locationName = _tr.find('.locationName'); //仓位
                    $locationId = _tr.find('.locationId'); //仓位ID
                    $quantity = _tr.find('.quantity'); //数量



                    var _this = $(this);
                    var pos = _this.offset();
                    var x = pos.left;
                    var y = pos.top + _this.height();
                    $box.css({
                        left: x,
                        top: y
                    }).html('').hide();
                    $status = true;
                });
                $box.delegate('li', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);

                    $goodsName.val(_this.attr('spec-no')); //商品
                    $specNumber.val(_this.attr('spec-no'))
                    $specId.val(_this.attr('spec-id'))
                    $specName.val(_this.attr('spec-name'))
                    $locationId.val(_this.attr('locationId'))
                    $locationName.val(_this.attr('locationName'))
                    $goodsId.val(_this.attr('goodsId')); //
                    $goodsNumber.val(_this.attr('goodsNumber')); //
                    $quantity.val(_this.attr('data-quantity')); //数量


                    $box.hide();
                    $status = false;
                });
                $box.click(function (e) {
                    e.stopPropagation();
                });
                // 商品搜索
                $('#sp-data').delegate('.goods', 'input', function (e) {
                    e.stopPropagation();
                    if ($box.css('display') == 'none') {
                        $box.show();
                    }
                    var key = $(this).val();
                    if(key.length<4) return;
                    // ajax..
                    $.ajax({
                        url: "/ajax_goods_stock/goods_spec_stock_search",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({key: key}),
                        success: function (res) {
                            // alert(res.data.length);
                            $('.sp-result').html("");
                            if (res.code == 0 && res.data.length > 0) {
                                // console.log(res.data);
                                // var data = [];
                                // $(res.data).each(function (i,d) {
                                //     data.push(d.specNumber+" "+d.goodsName+"_"+d.specName);
                                // })
                                render(res.data);
                            }
                            // alert(JSON.stringify(res));
                        }
                    });
                });


            }

            init();

            // 新增
            $(document).on('click','.add',function () {
                var newHtml = '<tr>\
					<td> <input type="hidden" name="specNumber" class="specNumber">\n' +
                    '<input type="hidden" name="specId" class="specId">\n' +
                    '<input type="hidden" name="goodsId" class="goodsId">\n' +
                    '<input type="hidden" name="goodsNumber" class="goodsNumber">\n' +
                    '<input type="text" class="goods" placeholder="请输入商品编码" autocomplete="off" /></td>\n' +
                    '<td><input type="text" readonly class="unit" placeholder="单位" /></td>';

                // newHtml += '<td><select name="address" class="address"><option disabled selected>请选择</option><option value="深圳库">深圳库</option><option value="本地库">本地库</option></select></td>';
                // newHtml += '<td><select name="address" class="address">';
                // var obj = eval('(' + housesData + ')');
                // $(obj).each(function (i, d) {
                //     newHtml += '<option value="' + d.number + '">' + d.name + '</option>';
                //     // alert(d.name);
                // })
                // newHtml += '</select></td>';

                newHtml += '<td><input type="text" name="quantity" class="quantity" placeholder="当前库存" /></td>\
					<td><input type="text" name="note" class="note" placeholder="请输入" /></td>\
					<td><i class="delete">-</i><i class="add">+</i></td>\
				</tr>';


                $('#sp-data').append(newHtml);

            });
            // 删除
            $('#sp-data').delegate('.delete', 'click', function () {
                $(this).parent('td').parent('tr').remove();
            });
            // 保存
            $('#save').click(function () {
                // 获取页面已有的一个form表单
                // var form = document.getElementById("sp-form");
                // 用表单来初始化
                var formData = $('#sp-form').serialize();
                // console.log(formData);
                var stockLocationId = $("#stockLocationId").val();
                if (stockLocationId == '' || stockLocationId == '0') {
                    alert("请选择仓库");
                    return false;
                }
                var billDate = $("#form_date").val();
                if (billDate == '') {
                    alert("请填写单据日期");
                    return false;
                }

                //检查商品规格
                var returnResult = true;
                var goodsCount = 0;
                //规格颜色
                $("input[name^='specNumber']").each(function (i, el) {
                    if ($(this).val() != "") {
                        //有商品
                        goodsCount++;
                        var quantity = $($("input[name^='quantity']")[goodsCount - 1]).val();
                    }
                });
                if (returnResult == false) return false;
                if (goodsCount == 0) {
                    alert("请添加商品");
                    return false;
                }

                // alert(JSON.stringify(formData));

                //specNumber
                // return false;
                $('#sp-form').submit();
            });
        });
    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#form_date' //指定元素
            });
        });
    </script>
</div>
</body>
<html>
